<template>
  <div class="promotions-view">
    <h1>促销活动管理</h1>
    
    <div class="promotion-controls">
      <div class="search-container">
        <input 
          v-model="searchQuery" 
          placeholder="搜索活动..." 
          class="search-input"
        >
        <button @click="showAddModal = true" class="add-button">
          + 创建活动
        </button>
      </div>
      
      <div class="filter-tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.value"
          :class="{ active: activeTab === tab.value }"
          @click="activeTab = tab.value"
        >
          {{ tab.label }}
        </button>
      </div>
    </div>
    
    <div class="promotion-list">
      <div v-for="promo in filteredPromotions" :key="promo.promotion_id" class="promotion-card">
        <div class="promotion-header">
          <h3>{{ promo.promotion_name }}</h3>
          <span class="merchant-id">商家ID: {{ promo.merchant_id }}</span>
        </div>
        
        <div class="promotion-details">
          <p><strong>描述:</strong> {{ promo.description }}</p>
        </div>
        
        <div class="promotion-actions">
          <button @click="editPromotion(promo)" class="edit-btn">编辑</button>
          <button @click="deletePromotion(promo.promotion_id)" class="delete-btn">删除</button>
        </div>
      </div>
    </div>
    
    <!-- 添加/编辑促销模态框 -->
    <PromotionModal
      :show="showAddModal"
      :promotion="currentPromotion"
      :isEditing="isEditing"
      @save="savePromotion"
      @close="closeModal"
    />
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import PromotionModal from '../components/PromotionModal.vue'

export default {
  name: 'PromotionsView',
  components: {
    PromotionModal
  },
  setup() {
    const promotions = ref([])
    const searchQuery = ref('')
    const activeTab = ref('all')
    const showAddModal = ref(false)
    const isEditing = ref(false)
    const currentPromotion = ref(createEmptyPromotion())
    
    const tabs = [
      { label: '全部', value: 'all' },
    ]

    // 加载促销活动数据
    const loadPromotions = async () => {
      try {
        const response = await axios.get('http://localhost:8080/healtheat208/promotion/list')
        promotions.value = response.data
      } catch (error) {
        console.error('获取促销活动数据失败:', error)
        alert('获取数据失败: ' + (error.response?.data?.message || error.message))
      }
    }

    onMounted(() => {
      loadPromotions()
    })

    // 创建空促销模板
    function createEmptyPromotion() {
      return {
        merchant_id: null,
        promotion_id: null,
        promotion_name: '',
        description: ''
      }
    }

    // 过滤促销活动
    const filteredPromotions = computed(() => {
      const query = searchQuery.value.toLowerCase()
      return promotions.value.filter(promo => 
        (promo.promotion_name && promo.promotion_name.toLowerCase().includes(query)) ||
        (promo.description && promo.description.toLowerCase().includes(query))
      )
    })

    // 添加/编辑促销
    const savePromotion = async (promoData) => {
      try {
        if (isEditing.value) {
          // 更新现有促销
          await axios.put('http://localhost:8080/healtheat208/promotion/update', promoData)
        } else {
          // 添加新促销
          await axios.post('http://localhost:8080/healtheat208/promotion/add', promoData)
        }
        loadPromotions()
        closeModal()
      } catch (error) {
        console.error('保存促销活动失败:', error)
        alert('操作失败: ' + (error.response?.data?.message || error.message))
      }
    }

    // 编辑促销
    const editPromotion = (promo) => {
      currentPromotion.value = { ...promo }
      isEditing.value = true
      showAddModal.value = true
    }

    // 删除促销
    const deletePromotion = async (id) => {
      if (confirm('确定要删除这个促销活动吗？')) {
        try {
          await axios.delete(`http://localhost:8080/healtheat208/promotion/${id}`)
          loadPromotions()
        } catch (error) {
          console.error('删除促销活动失败:', error)
          alert('删除失败: ' + (error.response?.data?.message || error.message))
        }
      }
    }

    // 关闭模态框
    const closeModal = () => {
      showAddModal.value = false
      isEditing.value = false
      currentPromotion.value = createEmptyPromotion()
    }

    return {
      promotions,
      searchQuery,
      activeTab,
      tabs,
      showAddModal,
      isEditing,
      currentPromotion,
      filteredPromotions,
      editPromotion,
      deletePromotion,
      savePromotion,
      closeModal
    }
  }
}
</script>

<style scoped>
.promotions-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.promotion-controls {
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  flex-grow: 1;
  max-width: 400px;
}

.add-button {
  padding: 8px 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.filter-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.filter-tabs button {
  padding: 8px 16px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.filter-tabs button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.promotion-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.promotion-card {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.promotion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.promotion-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.merchant-id {
  font-size: 14px;
  color: #666;
}

.promotion-details {
  margin-bottom: 15px;
}

.promotion-details p {
  margin: 5px 0;
  font-size: 14px;
  color: #555;
}

.promotion-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.promotion-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.edit-btn {
  background-color: #17a2b8;
  color: white;
}

.edit-btn:hover {
  background-color: #138496;
}

.delete-btn {
  background-color: #dc3545;
  color: white;
}

.delete-btn:hover {
  background-color: #c82333;
}
</style>